<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
    用组件化开发的思路展示学生和教师信息
    学生:
       姓名
       年龄
       班级

    教师：
       姓名
       年龄
       薪资
-->

<div id="app">
    <teacher></teacher>
</div>

<script>
    // 1.创建组件
    const student = {
        template:`
            <div>
                <h1>学生信息</h1>
                <p>姓名:张三</p>
                <p>年龄:20</p>
                <p>班级:python2512</p>
            </div>
        `
    }
    const teacher = {
        template:`
            <div>
                <h1>教师信息</h1>
                <p>姓名:李四</p>
                <p>年龄:20</p>
                <p>薪资:3000</p>
                <hr>
                <student></student>
            </div>
        `
    }

    // 2. 注册全局组件
    Vue.component('student',student)
    Vue.component('teacher',teacher)

    // 3. 使用全局组件
    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{}
      })
</script>
</body>
</html>
